<template>
    <div v-if="true">
        <div v-for="item in ordersList" :key="item.orderId" class="order-list-box">
            <div class="order-status">
                <div v-if="item.status === 1" class="font-16-333 fl">未指派服务工人</div>
                <div v-if="item.status === 2" class="font-16-333 fl">
                    由
                    <span>{{ item.employeeName || '--' }}</span>
                    完成服务
                </div>
                <div v-if="item.status === 4" class="font-16-333 fl">
                    由
                    <span>{{ item.employeeName || '--' }}</span>
                    提供服务
                </div>
                <div v-if="item.status === 3" class="font-16-333 fl">已取消服务</div>
                <div v-if="item.status === 1" class="font-12-3ab0a2 fr">待接单</div>
                <div v-if="item.status === 2" class="font-12-3ab0a2 fr">已完成</div>
                <div v-if="item.status === 4" class="font-12-3ab0a2 fr">已接单</div>
                <div v-if="item.status === 3" class="font-12-3ab0a2 fr">已取消</div>
            </div>
            <div class="display-flex">
                <div class="order-img">
                    <img :src="thumbnail" />
                </div>
                <div class="order-info">
                    <div class="font-14-333">{{ item.serviceDetail.serviceName }}</div>
                    <div class="mt10 display-flex">
                        <div
                            v-for="(spec, index) in item.serviceDetail.specifications"
                            :key="index"
                            class="font-12-3ab0a2 specifications-box m-r-15"
                        >
                            {{ spec.optionName }}
                        </div>
                    </div>
                    <div class="mt10 font-12-666">
                        {{ formatDateBeiJing(item.appointmentTime, '2022-MM-dd hh:mm', 'UCT') }}
                    </div>
                </div>
                <div class="order-number-price">
                    <div class="font-12-666 text-r width">x{{ item.amount }}</div>
                    <div class="font-18-333 mt20 text-r width">¥ {{ item.payment }}</div>
                </div>
            </div>
            <div class="display-flex">
                <div class="order-number-box">订单编号:{{ item.orderNumber }}</div>
                <div class="operation-box">
                    <el-button
                        v-if="item.status === 1"
                        v-logAction="{
                            page: currentRouteData.path,
                            item: 'cancelOrder',
                            descriptions: '用户点击取消订单按钮',
                        }"
                        size="small"
                        @click="cashCancel(item)"
                    >
                        取消订单
                    </el-button>
                    <el-button
                        v-logAction="{
                            page: currentRouteData.path,
                            item: 'checkOrder',
                            descriptions: '用户点击查看订单按钮',
                        }"
                        size="small"
                        @click="handleClick(item)"
                    >
                        查看订单
                    </el-button>
                    <el-button v-if="item.status === 4" size="small" @click="cashSuccess(item)">确认收货</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ExtractPropTypes, inject } from 'vue';
import { useRouter } from 'vue-router';
import { formatDateBeiJing } from '@/utils/utils';
import { createOrder } from '@/api/api.query.util';
import { ElMessage } from 'element-plus';
const router = useRouter();
const currentRouteData = router.currentRoute.value;
const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const inject1: any = inject('reload');
const props: ExtractPropTypes<{
    ordersList: Array;
}> = defineProps({
    ordersList: {
        type: Array,
        default: [],
    },
});
function handleClick(row: any) {
    router.push({ name: '/home/my-orders/details', query: { orderId: row.orderId } });
}
function cashSuccess(item) {
    createOrder({
        method: 'PUT',
        data: {
            orderNumber: item.orderNumber,
            status: 2,
        },
    }).then((res) => {
        ElMessage({
            message: '确认收货',
            type: 'success',
        });
        lacking();
    });
}
function cashCancel(item) {
    createOrder({
        method: 'PUT',
        data: {
            orderNumber: item.orderNumber,
            status: 3,
        },
    }).then((res) => {
        ElMessage({
            message: '取消订单',
            type: 'success',
        });
        lacking();
    });
}
function lacking() {
    inject1();
}
</script>

<style scoped lang="scss">
.order-list-box {
    padding: 15px 30px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.order-status {
    width: 100%;
    height: 16px;
}

.font-16-333 {
    color: #333333;
    font-size: 16px;
}
.font-16-333 > span {
    color: #3ab0a2;
}

.font-14-333 {
    color: #333333;
    font-size: 14px;
}

.font-12-333 {
    color: #333333;
    font-size: 12px;
}

.font-18-333 {
    color: #333333;
    font-size: 18px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.display-flex {
    display: flex;
}

.font-12-3ab0a2 {
    color: #3ab0a2;
    font-size: 12px;
}

.font-12-666 {
    color: #666666;
    font-size: 12px;
}

.order-img {
    padding: 15px 0;
    img {
        height: 60px;
        width: 60px;
    }
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.text-r {
    text-align: right;
}

.text-l {
    text-align: left;
}

.width-50 {
    width: 50px;
}

.specifications-box {
    order-radius: 4px;
    border: solid 1px #3ab0a2;
    line-height: 14px;
    padding: 0 6px;
}

.m-r-15 {
    margin-right: 15px;
}

.order-number-box {
    color: #333333;
    font-size: 12px;
    width: 400px;
    line-height: 32px;
}

.operation-box {
    width: calc(100% - 400px);
    text-align: right;
}

.order-info {
    padding: 15px;
    width: calc(100% - 110px);
}

.order-number-price {
    width: 100px;
    padding: 15px 0;
}
</style>
